// 全局通用样式
@use "variables" as *;
@use "mixins" as *;

// Flex布局工具类
.flex {
  display: flex;
}

.flex-content {
  display: flex;
  justify-content: center;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-around {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-column-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

// 定位工具类
.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

// 常用颜色
.text-primary {
  color: $primary-color;
}

.text-white {
  color: white;
}

.text-gray {
  color: $text-gray;
}

.bg-primary {
  background-color: $primary-color;
}

.bg-white {
  background-color: white;
}

.bg-transparent {
  background-color: transparent;
}

// 常用阴影
.shadow-sm {
  box-shadow: $shadow-sm;
}

.shadow-md {
  box-shadow: $shadow-md;
}

.shadow-lg {
  box-shadow: $shadow-lg;
}

// 圆角
.rounded-sm {
  border-radius: $border-radius-sm;
}

.rounded-md {
  border-radius: $border-radius-md;
}

.rounded-lg {
  border-radius: $border-radius-lg;
}

.rounded-full {
  border-radius: 50%;
}

// 过渡动画
.transition {
  transition: $transition-normal;
}

.transition-smooth {
  transition: $transition-smooth;
}

// 光标样式
.cursor-pointer {
  cursor: pointer;
}

// 溢出隐藏
.overflow-hidden {
  overflow: hidden;
}

// 字体
.font-yahei {
  font-family: $font-family-yahei;
}

// SVG图标颜色滤镜
.svg-white {
  filter: brightness(0) invert(1);
}

.svg-green {
  filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2475%) hue-rotate(86deg) brightness(118%) contrast(119%);
}

.svg-blue {
  filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(2475%) hue-rotate(200deg) brightness(118%) contrast(119%);
}

// 常用间距
.gap-sm {
  gap: $spacing-sm;
}

.gap-md {
  gap: $spacing-md;
}

.gap-lg {
  gap: $spacing-lg;
}

// 常用内边距
.p-sm {
  padding: $spacing-sm;
}

.p-md {
  padding: $spacing-md;
}

.p-lg {
  padding: $spacing-lg;
}

// 常用外边距
.m-sm {
  margin: $spacing-sm;
}

.m-md {
  margin: $spacing-md;
}

.m-lg {
  margin: $spacing-lg;
}
